import React, { useState } from 'react';
import { Tabs } from 'antd';
import Sheet from './sheet';
import css from './sheet.css';
import { useModel } from 'umi';

// 属性类型
type PropField = {
  /** 表单列表数据 */
  sheets: API.Sheet[];
  /** 颜色列表 */
  colors: Record<string, string>;
  /** 宽度调整系数 */
  widthrRatio: number;
  /** 高度调整系数 */
  heightRatio: number;
  /** 表格行头调整系数，用与行头对齐 */
  rowHeadTopOff: number;
};

const Sheets: React.FC<PropField> = (props) => {
  const { sheets, colors } = props;
  const { bodyHeight, scrollbarWidth } = useModel('sysInfo');
  const [activeKey, setActiveKey] = useState<string>('tab0');
  let osh = bodyHeight - 210;
  if (sheets.length > 1) {
    osh = osh - 75;
  }
  const sheetTables = sheets.map((s, i) => {
    return (
      <Sheet
        key={'' + i}
        colors={colors}
        sheet={s}
        widthrRatio={props.widthrRatio}
        heightRatio={props.heightRatio}
        scrollbarWidth={scrollbarWidth}
        offsetHeight={osh}
        inTab={true}
      />
    );
  });
  if (sheets.length > 1) {
    return (
      <Tabs
        tabPosition="bottom"
        type="card"
        className={css.tabs_div}
        activeKey={activeKey}
        onChange={(key) => setActiveKey(key)}
      >
        {sheetTables.map((s, i) => (
          <Tabs.TabPane tab={sheets[i].sheetName} key={'tab' + i} style={{ height: osh }}>
            {s}
          </Tabs.TabPane>
        ))}
      </Tabs>
    );
  }
  return sheetTables[0];
};
export default Sheets;
